<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>\

    <style>
        * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .container{
        width: 400px;
        margin: 0 auto;
    }
    .container h2 {
            margin: 20px 0;
            text-align: center;
        }
    .sub-title{
        margin-bottom: 10px;
        color: #666;
            text-align: center;
    }
    .container .row{
        margin-right: 20px;

    }
    .container .row{
        /* 设置弹性布局 */
        display: flex;
        /* 水平居中 */
        justify-content: center;
        /* 竖直居中 */
        align-items: center;
        margin-bottom:5px ;
    }
    .container span{
        width: 80px;
    }
    .container .row #submit{
        width: 240px;
        background-color: #dc6d1d;
        height: 30px;
        border-radius: 5px;
        border-style: none;
    }
    .container .messages{
        align-items: center;
        justify-content: center;
        padding: 10px;
        margin:5px ;
        margin-left: 70px;

    }


    </style>
    <script src="./js/jquery-3.6.3.js">

    </script>
</head>
<body>
    <div class="container">
        <h2><strong>表白墙</strong></h2>
        <p class="sub-title">输入后点击提交，会将内容显示在表格中</p>
        <div class="row">
            <span>谁：</span>
            <input type="text" class="text">
        </div>
        <div class="row">
            <span>对谁：</span>
            <input type="text" class="text">
        </div>
        <div class="row">
            <span>说什么:</span>
            <input type="text" class="text">
        </div>
        <div class="row">
            <button id="submit">提交</button>
        </div>

        <div class="messages">
            
        </div>
    </div>
</body>
<script>
    // 1. 获取相关的元素
    let submitBtnEl = document.querySelector('#submit');
    let inputEls = document.querySelectorAll('input');
    let messageEl = document.querySelector('.messages');
    //2.绑定单击事件
    submitBtnEl.onclick=function(){
        let sender=inputEls[0].value;
        let receiver=inputEls[1].value;
        let message=inputEls[2].value;
        //加入到message
   // let msg=sender+","+receiver+""+something;
   let str = '<b>' + sender + '</b> 对 <b>' + receiver + '</b>说：<b>' + message + '.</b>'
    //创建子节点
    let newEl=document.createElement('p');
    newEl.innerHTML=str;
    //找到父节点
    messageEl.appendChild(newEl);

    //清空
    inputEls.forEach(element => {
        element.value='';
    });
    //封装对象
    let jsons={
        "sender" : sender,
        "receiver": receiver,
        "content" : message
    };
    //将对象转化为json
    let jsonm=JSON.stringify(jsons);
    //提交ajax请求
    $.ajax({
       
        //方法类型
        type:"post",
        //url
        url: "message",
        //传递参数类型
        contentType: "application/json",
        //传递的数据
        data: jsonm,
        error: function(){
            console.log("传递失败");
        },
        success: function(){
            console.log("传递成功");
        }

    });
    
    };
    //页面回显功能的实现(在页面加载时调用)
    $.ajax({
        //方法类型
        type: "get",
        url:"message",
        success: function(data){
            //循环读取数据
            data.forEach(element=>{
                //创建p标签
            let newEl=document.createElement('p');
            //给p添加内容
            newEl.innerHTML='<b>'+element.sender+'</b> 对 <b>'+element.receiver+'</b>说：<b>'+element.content+'.</b>';
            messageEl.appendChild(newEl);
            });
            

        }
    });
    
</script>
</html>